<template>
  <div class="echarts-map-container">
    <!-- 返回按钮 -->
    <div class="toolbar-container">
      <a-button type="primary" status="success" size="mini" @click="toback">返回</a-button>
    </div>
    <div class="chart-container" style="width:100%;height:100%" ref="chartsDOM"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import sxMapJson from '@/assets/data/mapData/山西省.json';
import dtMapJson from '@/assets/data/mapData/山西省/大同市.json'
import useAppConfigStore from '@/store/modules/app-config'
import 'echarts-gl';
import grassyPng from '@/assets/grassy.png'

const appStore = useAppConfigStore()

// 城市映射
const map = {
  "山西省": sxMapJson,
  "大同市": dtMapJson
}

type mapKey = keyof typeof map;

// 初始化配置项
const options = ref<any>({
  geo3D: {
    map: "mapJson", // 指定要使用的地图名称
    roam: false, // 是否启用缩放和平移
    environment: 'auto', // 环境颜色
    realisticMaterial: { // 材质，可以设置地图背景
      roughness: 0.6,
      textureTiling: 20,
      detailTexture: grassyPng,
    },
    // 设置默认为可交互
    silent: false,
    // 阴影模式
    shading: 'realistic',
    // instancing会将 GeoJSON 中所有的 geometry 合并成一个，在 GeoJSON 拥有特别多（上千）的 geometry 时可以有效提升绘制效率。
    instancing: true,
    // 地区高度 
    regionHeight: 10,
    // 设置地图边界样式
    itemStyle: {
      color: '#666',
      opacity: 1,
      borderColor: '#000',
      borderWidth: 1
    },
    label: {
      show: true,
      color: appStore.themeColor,
      fontSize: 14,
      formatter: (params: any) => {
        return params.name
      },
    },
    // 视角控制配置
    viewControl: {
      alpha: 90, // 垂直方向的角度
      beta: 30, // 水平方向的角度 
      distance: 200, // 相机与地图的距离
      autoRotate: false, // 是否自动旋转
      // 旋转会卡，所以禁用旋转
      rotateSensitivity: 0, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。
      zoomSensitivity: 3 // 缩放操作的灵敏度，值越大越灵敏。默认为1。
    },
    data: [
      { name: '大同市', value: 11111 },
      { name: '朔州市', value: 22221 },
      { name: '忻州市', value: 33333 },
      { name: '太原市', value: 22231 },
      { name: '阳泉市', value: 44441 },
      { name: '吕梁市', value: 555525 },
      { name: '晋中市', value: 162475 },
      { name: '长治市', value: 65454 },
      { name: '临汾市', value: 77771 },
      { name: '晋城市', value: 88884 },
      { name: '运城市', value: 99995 },
    ]
  },
  // 标题
  title: {
    text: '广西GDP统计图(/万元)',
    textStyle: {
      color: appStore.themeColor
    }
  },
  // 提示框
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c} (p / km2)'
  },
  // 工具箱
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  series: [
    {
      name: "mapJson",
      type: 'map3D',
      map: 'mapJson', // 使用世界地图
      roam: true, // 是否启用缩放和平移
      environment: 'auto', // 环境颜色
      realisticMaterial: { // 材质，可以设置地图背景
        roughness: 0.6,
        textureTiling: 20,
        detailTexture: grassyPng,
      },
      // 设置默认为可交互
      silent: false,
      // 阴影模式
      shading: 'realistic',
      // instancing会将 GeoJSON 中所有的 geometry 合并成一个，在 GeoJSON 拥有特别多（上千）的 geometry 时可以有效提升绘制效率。
      instancing: true,
      // 地区高度 
      regionHeight: 10,
      // 设置地图边界样式
      itemStyle: {
        color: '#666',
        opacity: 0,
        borderColor: '#000',
        borderWidth: 0
      },
      label: {
        show: true,
        formatter: (params: any) => {
          return params.name
        },
        textStyle: {
          color: appStore.themeColor,
          fontSize: 14,
        }
      },
      // 视角控制配置
      viewControl: {
        // 最小俯仰角
        minBeta: -360,
        // 最大俯仰角
        maxBeta: 360,
        alpha: 90, // 垂直方向的角度
        beta: 30, // 水平方向的角度 
        distance: 200, // 相机与地图的距离
        autoRotate: false, // 是否自动旋转
        // 旋转会卡
        rotateSensitivity: 0, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。
        zoomSensitivity: 3 // 缩放操作的灵敏度，值越大越灵敏。默认为1。
      },
      data: [
        { name: '大同市', value: 11111 },
        { name: '朔州市', value: 22221 },
        { name: '忻州市', value: 33333 },
        { name: '太原市', value: 22231 },
        { name: '阳泉市', value: 44441 },
        { name: '吕梁市', value: 555525 },
        { name: '晋中市', value: 162475 },
        { name: '长治市', value: 65454 },
        { name: '临汾市', value: 77771 },
        { name: '晋城市', value: 88884 },
        { name: '运城市', value: 99995 },
      ],
      zlevel: 20,
    },
    {
      type: 'scatter3D',
      coordinateSystem: 'geo3D',
      geo3DIndex: 0,
      silent: false,
      shading: 'lambert',
      emphasis: {
        disabled: false, //是否可以被选中
        label: {
          show: true
        }
      },
      label: {
        show: true,
        color: '#0B0B0B',

        textStyle: {
          color: '#0B0B0B',
          fontSize: 14,
        }
      },
      symbol: 'circle',
      symbolSize: 10, // 点的大小
      data: [],
      itemStyle: {
        normal: {
          color: appStore.themeColor
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params: any) {
          return params.data.name + ': ' + params.data.value0;
        }
      },
      zlevel: 199,
    }
  ]
})

const links = ref<mapKey[]>([])

// 根据城市名称，初始化地图数据
const initParamsCity = (name: mapKey) => {
  echarts.registerMap("mapJson", {
    geoJSON: map[name],
  } as any);

  const mapFeatures = echarts.getMap("mapJson")?.geoJSON?.features
  // 构建点的数据
  const pointData = mapFeatures.map((feature: any) => {
    let x, y;
    [x, y] = feature.properties.center
    return {
      name: feature.properties.name,
      value: [x, y, -1000],
      value0: 100
    }
  });

  // 设置options
  options.value.series[1].data = pointData;

  // 销毁上一次地图实例
  if (echartsMap.value) {
    echartsMap.value.dispose();
  }
  echartsMap.value = echarts.init(chartsDOM.value)
  echartsMap.value.setOption(options.value);
  echartsMap.value.on("click", (params: any) => {
    links.value.push(params.name);
  });
}

const toback = () => {
  if (links.value.length === 1) return;
  links.value.pop();
}

// 地图容器
const chartsDOM = ref<HTMLElement>();
const echartsMap = ref();


watch(
  () => links,
  (newVal) => {
    if (!links.value.length) return;
    initParamsCity(links.value[links.value.length - 1]); // 始终渲染最后一个地图数据
  },
  {
    deep: true
  }
)

watch(
  () => appStore.themeColor,
  (newVal) => {
    // 刷新map
    options.value.title.textStyle.color = newVal;
    options.value.series[0].label.textStyle.color = newVal;
    options.value.series[1].itemStyle.normal.color = newVal;
  }
)

watch(
  () => options,
  (newVal) => {
    // 刷新map
    refreshMap();
  },
  {
    deep: true,
  }
)

// 刷新地图
const refreshMap = () => {
  // 显示 loading 动画
  echartsMap.value.showLoading();
  // 重新设置options
  echartsMap.value.setOption(options.value)
  // 得到结果后，关闭动画
  echartsMap.value.hideLoading();
}
onMounted(() => {
  links.value.push("山西省")
})
</script>

<style lang="less" scoped>
.echarts-map-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
</style>